<template>
  <div>
    <!--幻灯片-->
    <section class="ab_img">
      <img src="../assets/images/contact.jpg" />
    </section>
    <!--联系-->
    <div class="title1">
      <div class="title1_top">
        <h2>联系我们</h2>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="huanyanshow_con col-md-7 col-sm-12 col-xs-12">
          <div class="form_3">
            <ul class="clearfix">
              <li>
                <span>
                  品种
                  <i v-show="passvarieties == 0">*</i>
                  <i v-show="passvarieties == 1">!</i>
                  <i v-show="passvarieties == 2">√</i>
                </span>
                <input
                  type="text"
                  v-model="varieties"
                  @blur="checkVarieties()"
                />
                <!-- <span id="varieties"></span> -->
                <span v-show="passvarieties == 1" class="span_red"
                  >请输入中文</span
                >
              </li>
              <li>
                <span>
                  姓名
                  <i v-show="passuname == 0">*</i>
                  <i v-show="passuname == 1">!</i>
                  <i v-show="passuname == 2">√</i>
                </span>
                <input type="text" v-model="uname" @blur="checkUname()" />
                <span v-show="passuname == 1" class="span_red"
                  >请输入中文或英文</span
                >
              </li>
              <li>
                <span>
                  手机
                  <i v-show="passphone == 0">*</i>
                  <i v-show="passphone == 1">!</i>
                  <i v-show="passphone == 2">√</i>
                </span>
                <input type="text" v-model="phone" @blur="checkPhone()" />
                <span v-show="passphone == 1" class="span_red">请输入数字</span>
              </li>
              <li>
                <span>邮箱</span>
                <input type="text" v-model="email" />
              </li>
            </ul>
            <div class="text_a">
              <span>内容</span>
              <textarea name v-model="message"></textarea>
            </div>
            <button class="sum_b" @click="checksubmit()">立即提交</button>
          </div>
        </div>
        <div class="col-md-5 col-sm-12 col-xs-12 icoo my_bottom">
          <p class="p16">
            <span class="glyphicon glyphicon-envelope"></span
            >联系邮箱：123456@qq.com
          </p>
          <p class="p16">
            <span class="glyphicon glyphicon-phone-alt"></span
            >联系电话：13652649532
          </p>
          <p class="p16">
            <span class="glyphicon glyphicon-home"></span
            >联系地址：嘉州协信中心A栋
          </p>
          <p class="p16">
            <span class="glyphicon glyphicon-globe"></span>公司官网：萌宠之家
          </p>
        </div>
      </div>
    </div>

    <div class="ctn clearfix" style="font-size: 0px">
      <my-map></my-map>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      varieties: "",
      uname: "",
      phone: "",
      email: "",
      message: "",
      passvarieties: 0,
      passuname: 0,
      passphone: 0,
    };
  },
  methods: {
    // 检验是否输入宠物品种
    checkVarieties() {
      let regexp = /^[\u4e00-\u9fa5]{2,10}$/;
      if (regexp.test(this.varieties)) {
        this.passvarieties = 2;
      } else {
        this.passvarieties = 1;
      }
    },
    // 检验是否输入姓名
    checkUname() {
      let regexp = /^[\u4e00-\u9fa5]{2,10}|[a-zA-Z]$/;
      if (regexp.test(this.uname)) {
        this.passuname = 2;
      } else {
        this.passuname = 1;
      }
    },
    // 检验是否输入电话号码
    checkPhone() {
      let regexp = /^1[3-9]\d{9}$/;
      if (regexp.test(this.phone)) {
        this.passphone = 2;
      } else {
        this.passphone = 1;
      }
    },
    // 检验是否提交成功
    checksubmit() {
      this.checkVarieties();
      this.checkUname();
      this.checkPhone();
      // 全部条件全部通过才能进行留言;
      if (
        this.passuname == 2 &&
        this.passvarieties == 2 &&
        this.passphone == 2
      ) {
        this.axios
          .post(
            "/user/userMessage",
            `varieties=${this.varieties}&uname=${this.uname}&phone=${this.phone}&email=${this.email}&message=${this.message}`
          )
          .then((res) => {
            if ((res.data.code = 200)) {
              alert("提交成功");
              // console.log("提交成功");
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.title1_top {
  font-size: 3rem;
  padding: 1rem 0;
}
button {
  border: 0;
  outline: 0;
}
my-map {
  height: 450px;
}
.my_bottom {
  padding-bottom: 30px;
}
.span_red {
  color: red;
}
</style>